<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>编辑首页轮播图</title>
	<link rel="stylesheet" href="/admin/src/css/layui.css">
	<style>
		.mr10{
			display: inline-block;
		}
		.layui-form-label{
			min-width: 100px;
		}
		.layui-upload{
			margin-left: 30px;
		}
		.layui-input-block textarea{
			width:450px;
		}
		.layui-form-item .layui-input-inline{
			width:400px;
		}
	</style>
</head>

<body >
	<form class="layui-form " style="margin:20px auto;">
		<div class="layui-form-item">
			<label class="layui-form-label">广告标题</label>
			<div class="layui-input-inline">
				<input type="text" name="title" id="title" value="{$info['title']}" lay-verify="required" placeholder="请输入广告标题" autocomplete="off" class="layui-input">
				<input type="hidden" name="id" id="id" value="{$info['id']}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">广告跳转地址</label>
			<div class="layui-input-inline">
				<input type="text" name="url" id="url" value="{$info['url']}"  placeholder="请输入跳转地址" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">是否显示</label>
			<div class="layui-input-block">
				<input type="radio" name="is_status" value="1" title="是" {$info['is_status'] == 1 ? 'checked' : ''}>
				<input type="radio" name="is_status" value="0" title="否" {$info['is_status'] == 0 ? 'checked' : ''}>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">排序</label>
			<div class="layui-input-inline">
				<input type="text" name="sort" id="sort" value="{$info['sort']}" lay-verify="required" placeholder="请输入排序" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-inline">
				<input type="text" name="remark" id="remark" value="{$info['remark']}"  placeholder="请输入备注" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-upload">
			<button type="button" class="layui-btn" id="test1">选择图片</button>
			<div class="layui-upload-list">
				<img style="width:200px;" src="{$info['image']}" class="layui-upload-img" id="demo1">
				<p id="demoText" src = "{$info['image']}"></p>
			</div>
		</div>

	  <div style="margin-top: 20px;" class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
	    </div>
	  </div>
	</form>
	<script src="/admin/src/layui.js" ></script>
<script>

	var infoStatus = '{$infoStatus}'
    layui.use(['form','jquery','upload'], function(){
      var form = layui.form ,
		  layer = layui.layer,
          upload = layui.upload,
		  $= layui.jquery;
      var i = 0;
      var imgList = $("#demoText").attr('src');
      console.log(imgList);
      if(infoStatus == 0){
		  layer.msg('获取不到对应的信息',{time:1000},function(){
		  		window.parent.frames.location.href="/admin/rotationAdvert/index"
		  })
	  }

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/admin/upload/images/uploadImg?imgType=rotationAdvert' //上传接口
            ,done: function(res){
                //上传完毕回调
                if(res.code == 0){
                    $("#demo1").attr('src',res.data);
                    imgList = res.data;
                }else{
                    layer.msg(res.message);
                }
            }
        });

      //监听表单提交
      form.on('submit(formDemo)', function(data){
		var postData = data.field;
		postData.image =  imgList;
		$.ajax({
			url: '/admin/rotationAdvert/update/data',
			type: 'POST',
			data:postData,
			success : function (backData) {
			  if(backData['status'] == 200){
				  layer.msg(backData.message,{time:1200},function(){
					  window.parent.frames.location.href="/admin/rotationAdvert/index"
				  })
				  
			  }else{
				  layer.msg(backData.message);
			  }
			}
		})
        return false;
      });

    });

</script>
</body>
</html>
